import React from 'react' 
import ReactDOM from 'react-dom'    
import './css/Popup.css'
 import { Modal, Button } from 'antd';  
 import { DatePicker } from 'antd'; 
const { MonthPicker, RangePicker } = DatePicker;
import moment from 'moment';
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
import Tabs from '../../component/Tabs/Tabs'  
 
class Popup extends React.Component {
    constructor(props) {
        super(props) 
    }

    config={//相关配置
        theme:'default',
        defaultTabsIndex:0,//默认点击一个（关闭响应）
        title:'弹窗标题',
        visible:true,//弹窗的关闭打开
        width:450,
        nextTxt:'保存', 
        nextStyle:{  color:'#fff'},
        nextFn : () => { 
            setTimeout(() => {
                this.config.visible =false ;
                let index = this.config.defaultTabsIndex; 
                let par={}
                switch(index){
                    case 0:
                         par={
                            closeFlag:  this.config.data[index].data[0].currentLev,
                            noticeCon: this.config.data[index].data[1].content,
                            closeTm: this.config.data[index].data[2].showTime,
                            noticePer: this.config.data[index].data[3].data 
                        }
                        break;
                    case 1:
                          par={
                            curLev:  this.config.data[index].data[0].currentLev,
                            noticeCon: this.config.data[index].data[1].content,
                            curTm: this.config.data[index].data[2].showTime,
                            noticePer: this.config.data[index].data[3].data 
                        }
                        break;
                }
           
                this.setState({})
            }, 2000);
        }, 
        otherText:'重置', 
        otherStyle:{  backgroundColor:'#fff', },
        otherFn : () => {
            // this.config.visible =false ;//关闭窗口
            // this.config.tree.show =false;//关闭树 
            let index = this.config.defaultTabsIndex;   
            this.config.data[index].data[0].btnClick(this.config.data[index].data[0],0);

            this.config.data[index].data[1].content = '';
            this.config.data[index].data[2].showTime ='';
            this.config.data[index].data[3].data =[]; 
            this.setState({}) 
        },
        tabsDatas : [
            {
                text: '关闭响应',
                value: 0
            },{
                text: '调整等级',
                value: 1
            } 
        ],
        tabsClick :(item, index) => {
            this.config.defaultTabsIndex =index; 
            this.config.tree.show=false;//关闭tree
            this.config.width =450;
           this.setState({}) 
        },
        tabsConfig : { 
            type: 'card',
            height:28
        },
        tree:{
            show:false,
            key:'key=s_mail_list',
            checkedKeys: [ ],//默认选中的对象
            selectedKeys: [ ],//树节点触发对象
            expandedKeys: ['0'],//默认展开的节点
            autoExpandParent:true,
            serachConfig:{
                name:'接收人:', 
                itemStyle:{width:'100%'},
                btnTxt:'搜索',
                btnStyle:{ height: '30px',  display:'inline-block',marginLeft:'5px', padding:'5px 10px',color:'#5d77aa',backgroundColor:'#ddd',borderRadius:'3px',textAlign:'center'},
                btnClick: () => {  
                        this.setState({}) 
                },
                content:'',
                inputChange:(e,data)=>{ 
                    data.content = e.target.value; 
                    this.setState({})
                },
                data:[ ]
            },
            data:[
                {
                    title: '0s',
                    key: '0',
                    data: [
                         {
                            title: '0s0',
                            key: '0-0',
                            data: [{
                                title: 'dafs ',
                                key: '0-sds-0',
                                data: [
                                { title: 'ds f', key: '0-0-0-0' },
                                { title: 'asd0-1', key: '0-0-0-1' },
                                { title: '0-0-0-2', key: '0-0-0-2' },
                                ],
                            }, {
                                title: '0-0-1',
                                key: '0-0-1',
                                data: [
                                { title: 'daf ', key: '0-0-1-0' },
                                { title: 'cx', key: '0-0-1-1' },
                                { title: 'cx', key: '0-0-1-2' },
                                ],
                            }, {
                                title: '0-0-2',
                                key: '0-0-2',
                            }],
                            }, {
                            title: '0-1',
                            key: '0-1',
                            data: [
                                { title: 'xcv', key: '0-1-0-0' },
                                { title: 'dv', key: '0-1-0-1' },
                                { title: '0-1-0-2', key: '0-1-0-2' },
                            ],
                            }, {
                            title: '0-2',
                            key: '0-2',
                        }
                    ]
                }
               ]
        },
        data:[
            {
              data:[
                    {
                        name:'关闭应急响应:',
                        itemStyle:{width:'95px'}, 
                        type:'btn',
                        currentLev:'是',
                        btnClick:(data,index)=>{
                            data.data.map((item,i)=>{
                                if(i==index){
                                    item.class='normal active';
                                   data.currentLev =item.name;
                                }else{
                                    item.class ='normal'
                                }
                            }) 
                            this.setState({}) 
                        },
                        data:[{
                            name:'是',
                            class:'normal active',
                        },{
                            name:'否',
                            class:'normal',
                        }]
                    },
                    {
                        name:'通知内容:',
                        itemStyle:{width:'95px'}, 
                        type:'input',
                        rightStyle:{width:'100%',borderColor:'#C8DDF5',minHeight:70},
                        content:'',
                        inputChange:(e,data)=>{ 
                            data.content = e.target.value; 
                            this.setState({})
                        }
                    },
                    {
                        name:'关闭时间:',
                        itemStyle:{width:'95px'}, 
                        type:'singleTime',
                        dateFormat: 'YYYY-MM-DD HH:mm',
                        disabledSeconds:true,//禁用秒  
                        showTime:'2015/09/05',
                        timeChange:(date, dateString)=> {
                            console.log(date, dateString);
                        },
                        getTime:(value)=>{//获取时间
                             let index = this.config.defaultTabsIndex;
                             this.config.data[index].data[2].showTime = T.clock(new Date(value._d)).fmt('YYYY-MM-DD hh:mm:ss');
                             console.log('getTime: ', value); 
                        }
                    },
                    {
                        name:'通知对象:',
                        type:'custonLabel',//自定义的label 
                        itemStyle:{width:'95px'}, 
                        btnTxt:'增加',
                        btnStyle:{ height: '30px',  display:'inline-block',marginLeft:'5px', padding:'5px 10px',color:'#5d77aa',backgroundColor:'#ddd',borderRadius:'3px',textAlign:'center'},
                        btnClick: () => {
                           if( this.config.tree){//存在树的数据
                              this.config.tree.show =true;
                              this.config.width =600,
                              this.setState({})
                           } 
                        },
                        data:[ ]
                    }
              ]
          },
          {
              data:[
                    {
                        name:'调整级别:',
                        itemStyle:{width:'80px'}, 
                        type:'btn',
                        currentLev:'一级',
                        btnClick:(data,index)=>{
                            data.data.map((item,i)=>{
                                if(i==index){
                                    item.class='normal active';
                                   data.currentLev =item.name;
                                }else{
                                    item.class ='normal'
                                }
                            }) 
                            this.setState({}) 
                        },
                        data:[{
                            name:'一级',
                            class:'normal active',
                        },{
                            name:'二级',
                            class:'normal',
                        },{
                            name:'三级',
                            class:'normal',
                        },{
                            name:'四级',
                            class:'normal',
                        }]
                    },
                    {
                        name:'通知内容:',
                        itemStyle:{width:'80px'}, 
                        type:'input',
                        rightStyle:{width:'100%',borderColor:'#C8DDF5',minHeight:70},
                        content:'',
                        inputChange:(e,data)=>{ 
                            data.content = e.target.value; 
                            this.setState({})
                        }
                    },
                    {
                        name:'调整时间:',
                        itemStyle:{width:'80px'}, 
                        type:'singleTime',
                        showTime:'2015/09/05',
                        dateFormat: 'YYYY-MM-DD HH:mm',
                        disabledSeconds:true,//禁用秒 
                        timeChange:(date, dateString)=> {
                            console.log(date, dateString);
                        },
                        getTime:(value)=>{
                              let index = this.config.defaultTabsIndex;
                            this.config.data[index].data[2].showTime = T.clock(new Date(value._d)).fmt('YYYY-MM-DD hh:mm:ss');
                             console.log('getTime: ', value);
                        }
                    },
                    {
                        name:'通知对象:',
                        itemStyle:{width:'80px'}, 
                        type:'custonLabel',//自定义的label 
                        btnTxt:'增加',
                        btnStyle:{ height: '30px',  display:'inline-block',marginLeft:'5px', padding:'5px 10px',color:'#5d77aa',backgroundColor:'#ddd',borderRadius:'3px',textAlign:'center'},
                        btnClick: () => {
                           if( this.config.tree){//存在树的数据
                              this.config.tree.show =true;
                              this.config.width =600,
                              this.setState({})
                           } 
                        },
                        data:[ ]
                    }
              ]
          }
        ]
    }

    info={
        
    }
 
    componentWillMount = () => {
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
    } 
    componentDidMount = () => {   
        let index = this.config.defaultTabsIndex;
        this.config.tabsClick(this.config.tabsDatas[index],index);
        if(this.config.tree){
            this.getData(this.config.tree.key)
        }
    } 
 
    saveClick = ( data) => {     } 
  
   treeExpand = (expandedKeys) => {
        console.log('onExpand', arguments); 
        this.config.tree.expandedKeys = expandedKeys;
        this.config.tree.autoExpandParent =false;
        this.setState({}) 
    }
 
    treeCheck = (checkedKeys) => {//	点击复选框触发
        console.log('onCheck', checkedKeys);
        this.config.tree.checkedKeys =checkedKeys;
        let index = this.config.defaultTabsIndex;
        this.config.data[index].data[this.config.data[index].data.length-1].data=checkedKeys;
        this.setState({  });
    }

    treeSelect = (selectedKeys, info) => {//点击树节点触发
        console.log('onSelect', selectedKeys);
        this.config.tree.selectedKeys =selectedKeys; 
        this.setState({ });
    }
    renderTreeNodes = (data) => {
        return data.map((item) => {
        if (item.data) {
            return (
            <TreeNode title={item.title} key={item.key} dataRef={item}>
                {this.renderTreeNodes(item.data)}
            </TreeNode>
            );
        }
        return <TreeNode {...item} />;
        });
    }
    showModal = () => {
        this.config.visible=true;
        this.setState({}) 
    }
    searchFn = (e) =>{
        let value = e.target.value; 
    }

    // 数据请求
    getData = (key) =>{
       let that = this; 
        T.ajax({
        key: key,
        data: {},
        success: function success(result) {
               let data =  JSON.parse(result).data;    
               that.proDataFn(data); 
            }
        });
    }

    proDataFn =(data) =>{ 
        let temp=[];
        let firstindex=0,twoindex=0;
        data.map((item,i)=>{
             let fdata =item;
             let all=0
             data.map((jtem,j)=>{
                 if(fdata.pid==jtem.id){
                     fdata.data=[];
                     fdata.title =fdata.name;
                     fdata.key = i+'-'+j;
                     if(jtem.pid==temp[0].id){ 
                         temp[0].data.map((ktem,k)=>{
                             if(ktem.id ==fdata.pid){ 
                                    temp[0].data[k].data.push(fdata);   
                                    console.log("s")
                                
                             }
                         })
                     }else{
                        temp[0].data.push(fdata);  
                        console.log("s")
                     }
                     firstindex++;
                 }else{//第一级
                      all++;
                 }
             })
             if(all==data.length){
                fdata.data=[];
                 fdata.title =fdata.name;
                 fdata.key = i;
                temp.push(fdata); 
                firstindex++;
             }
        })

        this.config.tree.data =temp;
        this.setState({})
    }
    render() {    
        let index = this.config.defaultTabsIndex; 
        let  showData =this.config.data[index].data;
        let rightC='';
 
        let disabledSeconds =(s,h)=> { 
            return []
        }
        let allshow =(s,h)=> { 
            return []
        } 

        let serach =()=>{
                if(this.config.tree && this.config.tree.serachConfig){////存在树的配置，且树上面要搜索栏  
                    return( 
                            <div className='searchBox'>
                                <label for=""> this.config.tree.serachConfig.name</label>
                                <input type="" name="" value={this.config.tree.serachConfig.content} onChange={()=>this.config.tree.serachConfig.inputChange(event,this.config.tree.serachConfig)}/>
                                <div onClick={this.btnClick} style={this.config.tree.serachConfig.btnStyle} >  this.config.tree.serachConfig.btnTxt   </div>
                            </div> 
                    )
                }   
        }
        return (
            <div className='popup'>
     

                <Modal
                    wrapClassName={this.config.theme}
                    visible={this.config.visible}
                    width={this.config.width} 
                    title={this.config.title}
                    onOk={this.config.nextFn}
                    onCancel={this.config.otherFn} 
                    footer={null}
                    > 
                    <div className='main'>
                        
                        <div className='leftWrap'>
                            <Tabs dataSource={this.config.tabsDatas} onClick={this.config.tabsClick} config={this.config.tabsConfig} />
                            <div className='content'> 
                                {  
                                showData.map((item,i)=>{ 
                                    switch(item.type){
                                            case 'btn':
                                                return(
                                                    <div>
                                                        <label for="" style={item.itemStyle}>{item.name}</label>
                                                        <div className='rightC'>
                                                            {
                                                                item.data.map((jtem,j)=>{
                                                                    return (
                                                                        <span className={jtem.class} onClick = {()=>item.btnClick(item,j)}>{jtem.name}</span>
                                                                    )
                                                                })
                                                            }
                                                        </div> 
                                                    </div>
                                                )
                                            break;
                                            case 'input':
                                                    return(
                                                        <div>
                                                            <label for="" style={item.itemStyle}>{item.name}</label>
                                                            <div className='rightC'>
                                                                <textarea rows="" cols=' ' type="" name="" value={item.content} style={item.rightStyle} onChange={()=>item.inputChange(event,item)}>
                                                                </textarea>
                                                            </div> 
                                                        </div>
                                                    )
                                            break;
                                            case 'singleTime':
                                                return(
                                                        <div>
                                                            <label for="" style={item.itemStyle}>{item.name}</label>
                                                            <div className='rightC'>
                                                                <DatePicker 
                                                                    showTime
                                                                    showToday
                                                                     defaultValue={moment(item.showTime, 'YYYY-MM')}
                                                                    disabledSeconds={this.config.disabledSeconds?disabledSeconds:allshow} 
                                                                    hideDisabledOptions 
                                                                    format={item.dateFormat}  
                                                                    onChange={item.timeChange} 
                                                                    onOk={item.getTime}
                                                                    /> 
                                                            </div> 
                                                        </div>
                                                    )
                                            break;
                                            case 'custonLabel':
                                                return(
                                                    <div>
                                                        <label for="" style={item.itemStyle}>{item.name}</label>
                                                        <div className='rightC'>
                                                            <div className='custonLabel'>
                                                                { 
                                                                    item.data.map((ktem,k)=>{
                                                                        return(
                                                                            <label >{ktem},</label>
                                                                        )
                                                                    })
                                                                }
                                                            </div>
                                                            <div  style={item.btnStyle} onClick={item.btnClick}>
                                                                {item.btnTxt}
                                                            </div>
                                                        </div> 
                                                    </div>
                                                )
                                            break;
                                            
                                    }
                                
                                })
                            } 
                            </div>
                            <div className='btnWrap'>
                                <div className="btnNext"  onClick={this.config.nextFn} style={this.config.nextStyle}> {this.config.nextTxt} </div>
                                <div className="btnOther"  onClick={this.config.otherFn} style={this.config.otherStyle}>{this.config.otherText}</div>
                            </div>
                        </div>
              
                        <div className='rightWrap' style={{display:this.config.tree.show?'':'none'}}> 
                            {   serach       }
                            <Tree
                                    checkable  
                                    expandedKeys={this.config.tree.expandedKeys}
                                    onExpand={this.treeExpand}
                                    onCheck={this.treeCheck}
                                    checkedKeys={this.config.tree.checkedKeys}
                                    onSelect={this.treeSelect}
                                    selectedKeys={this.config.tree.selectedKeys}
                                >
                                {this.renderTreeNodes(this.config.tree.data)}
                            </Tree>
                        </div>

                    </div>
                </Modal>
            </div>
        )
    }
}

export default Popup
